<template>
	<view class="index">
		<moveOverBtn v-if="overBtnShow" :isDock="true" :existTabBar="true" @btnClick="btnClick" @btnTouchstart="btnTouchstart" 
		@btnTouchend="btnTouchend"></moveOverBtn>
		<view class="componentView" @touchstart="closeAddBookBtn">
			<view :class="{pageGo:pageGo, pageCome:pageCome}" v-if="tab === 1">
				<mine v-on:changeTab="changeTab" ref="weatherBlock"></mine>
			</view>
			<view :class="{pageGo:pageGo, pageCome:pageCome}" v-if="tab === 2">
				<like ref="thingsBlock"></like>
			</view>
			<view :class="{pageGo:pageGo, pageCome:pageCome}" v-if="tab === 3">
				<region></region>
			</view>
			<view :class="{pageGo:pageGo, pageCome:pageCome}" v-if="tab === 4">
				<bell></bell>
			</view>
		</view>
		<!-- <keep-alive> -->
		<!-- </keep-alive> -->
		<view :class="{tabStyle:true,tabNotStyle:tabShow}">
			<tabbar v-on:tabKey="tabKey" ></tabbar>
		</view>
	</view>
</template>

<script>
	import tabbar from "../Tabbar/tabbar.vue"
	import mine from "../Mine/mine.vue"
	import like from "../Like/like.vue"
	import region from "../Region/region.vue"
	import bell from "../Bell/bell.vue"
	import moveOverBtn from "../MoveOverBtn/moveOverBtn.vue"
	export default {
		components: {
			tabbar,
			mine,
			like,
			region,
			bell,
			moveOverBtn
		},
		onShareAppMessage: function (res) {
			var that = this;
			return {
				title: '会快记~',
				path: '/pages/index/index?id=',
				success: function (res) {
					// 转发成功
					uni.showToast({
						title: '转发成功',
						icon: 'none',
						duration: 1500
					})
				},
				fail: function (res) {
					// 转发失败
					uni.showToast({
						title: '转发失败',
						icon: 'none',
						duration: 1500
					})
				}
			}
		},
		onShareTimeline: function (res) {
			return {
				title: '会快记',
				path: '/pages/index/index?id=',
				success: function (res) {
					// 转发成功
					uni.showToast({
						title: '转发成功',
						icon: 'none',
						duration: 1500
					})
				},
				fail: function (res) {
					// 转发失败
					uni.showToast({
						title: '转发失败',
						icon: 'none',
						duration: 1500
					})
				}
			}
		},
		data() {
			return {
				tab: 1,
				pageGo: false,
				pageCome: false,
				tabShow: false,
				overBtnShow: true,
			}
		},
		onLoad() {
			this.$refs.weatherBlock.getWeather()
		},
		onShow() {
			if(this.tab === 1){
				this.$refs.weatherBlock.getBooksData()
			}
			if(this.tab === 2){
				this.$refs.thingsBlock.getThingData()
			}
		},
		methods: {
			closeAddBookBtn(){
				getApp().globalData.addBookBtn = false
			},
			changeTab(val){
				if(val == 'weatherChangeBig'){
					this.tabShow = true
				}
				if(val == 'weatherChangeSmall'){
					this.tabShow = false
				}
			},
			tabKey(key) {
				this.pageCome = false
				this.pageGo = true
				let that = this
				setTimeout(function() {
					that.tab = key
					if(that.tab === 3 || that.tab === 4){
						that.overBtnShow = false
					}else{
						that.overBtnShow = true
					}
				}, 100);
				setTimeout(function() {
					that.pageGo = false
					that.pageCome = true
				}, 150);
			}
		}
	}
</script>

<style>
	.componentView{
		position: absolute;
		width: 100%;
		height: 100vh;
		font-size: 100rpx;
		background-color: rgba(172, 183, 190, 0.7);
	}
	
	.componentView > view{
		width: 100%;
		height: 100%;
		position: relative;
		top: 0;
	}
	
	.pageGo{
		opacity: 0;
		transition: opacity 0.2s ease-out;
	}
	
	.pageCome{
		opacity: 1;
		transition: opacity 0.2s ease-out;
	}
	
	.tabStyle{
		/* opacity: 1; */
		/* transform:translateX(-100%); */
		transition: all 0.4s;
	}
	
	.tabNotStyle{
		/* opacity: 0; */
		display: none;
		transition: all 0.4s;
		/* transform:translateX(-110%); */
	}
</style>
